import React, {Component} from 'react';
import {StyleSheet, Text, View, Platform, Image, TouchableOpacity, Dimensions, Linking} from 'react-native';
import Toast from "react-native-easy-toast";
import Clipboard from '@react-native-community/clipboard'

import ParallaxScrollView from 'react-native-parallax-scroll-view';
import Ionicons from "react-native-vector-icons/Ionicons";
import MaterialIcons from "react-native-vector-icons/MaterialIcons";

import NavigationBar from "../common/NavigationBar";
import {AboutAuthorList} from '../common/More_Menu'
import AboutPageData from './data/AboutPageData.json'

const STICKY_HEADER_HEIGHT = Platform.OS === 'ios' ? 84 : 90;

// 关于页面详情
class AboutAuthorPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      aboutAuthorData: {},
      headerTitleFlag: true, // 视差标题隐藏或显示
      openTutorialFlag : false,   // 是否打开教程,
      openContactFlag: false,   // 是否打开联系方式
      openNum: -1,  //打开第几个item，用户将其向下箭头变成向上箭头，-1为不打开任何item
    }
  }

  render() {
    return (
      <View style={{flex: 1}}>
        {/* 顶部导航栏处理 */}
        <NavigationBar
          statusBar={{hidden: true}}
          hide={true}
        />
        <ParallaxScrollView
          renderBackground={this.headBackground}
          contentBackgroundColor={'#f3f3f3'}
          parallaxHeaderHeight={270}
          stickyHeaderHeight={STICKY_HEADER_HEIGHT}
          renderForeground={this.renderForeground}
          onChangeHeaderVisibility={this.changeHeader}
          renderFixedHeader={this.fixedHeader}
        >
          {this.renderContent()}
        </ParallaxScrollView>
        <Toast ref={(toast) => this.toast = toast} fadeOutDuration={1000} position={'center'}/>
      </View>
    );
  }

  componentDidMount() {
    // fetch('https://www.devio.org/io/GitHubPopular/json/github_app_config.json')
    //   .then(res => {
    //     if (res.ok) {
    //       return res.json()
    //     }
    //   })
    //   .then(value => {
    //     let {aboutAuthorData} = this.state;
    //     this.setState({
    //       aboutAuthorData: value
    //     });
    //     console.log(value)
    //   })
    //   .catch(err => {
    //     console.log(err)
    //   })

    this.setState({
      aboutAuthorData: AboutPageData
    });
  };

  // 各个按钮连接
  linkingHandle = async (i) => {
    let {openTutorialFlag,openNum,openContactFlag} = this.state;
    this.setState({
      openNum: openNum === i ? -1 : i,
      openTutorialFlag: false,
      openContactFlag: false,
    },()=>{

      // 如果是点击第一个按钮，打开其子内容
      if (i === 0) {
        this.setState({
          openTutorialFlag: !openTutorialFlag,
        })
      }
      // 如果是点击第二个按钮，前往博客页面
      if (i === 1) {
        this.goBlog()
      }
      // 如果是点击第三个按钮，打开其子内容
      if (i === 3) {
        this.setState({
          openContactFlag: !openContactFlag,
        })
      }

    });

  };

  // 打开联系方式
  openContact = () => {
    return <View>
      <TouchableOpacity style={styles.tutorialItem} onPress={()=>this.clipboardTxt('QQ:11234454')}>
        <Text>QQ:11234454</Text>
        <Ionicons name={'chevron-forward'} size={26} color={'#666'}/>
      </TouchableOpacity>
      <TouchableOpacity style={styles.tutorialItem} onPress={()=>this.clipboardTxt('Email:29373@qq.com')}>
        <Text>Email:29373@qq.com</Text>
        <Ionicons name={'chevron-forward'} size={26} color={'#666'}/>
      </TouchableOpacity>
    </View>
  };

  // 复制点击的文字内容到剪切板，并提示已复制
  clipboardTxt = (txt) => {
    // 复制点击的文字内容到剪切板
    Clipboard.setString(txt);
    // 提示用户复制的内容
    this.toast.show('您已复制：'+txt)
  };

  // 展开教程的内容
  openTutorial = () => {
    return <View>
      <TouchableOpacity style={styles.tutorialItem}>
        <Text>React Native基础教程</Text>
        <Ionicons name={'chevron-forward'} size={26} color={'#666'}/>
      </TouchableOpacity>
      <TouchableOpacity style={styles.tutorialItem}>
        <Text>React Native高级实战教程</Text>
        <Ionicons name={'chevron-forward'} size={26} color={'#666'}/>
      </TouchableOpacity>
    </View>
  };

  // 前往技术博客页面
  goBlog = () => {
    let {navigation} = this.props;
    this.setState({
      openNum: -1,
    });
    navigation.push('WebViewPage',{url:AboutPageData.author.url})
  };

  // 渲染内容
  renderContent = () => {
    let {openTutorialFlag,openNum, openContactFlag} = this.state;
    return AboutAuthorList.map((item, i) => {
      return <View key={i}>
        <TouchableOpacity style={styles.contentItem} onPress={() => {
          this.linkingHandle(i)
        }}>
          <View style={styles.iconNameBox}>
            <item.Icons name={item.icon} size={26} color={'#666'}/>
            <Text style={styles.contentName}>{item.name}</Text>
          </View>
          {/* 显示向下或者向上箭头*/}
          {
            openNum === i ? <Ionicons name={'chevron-up'} size={26} color={'#666'}/> :
              <Ionicons name={'chevron-down'} size={26} color={'#666'}/>
          }
        </TouchableOpacity>
        {/* 如果点击时第一个教程，则展开教程下的子标签*/}
        { i===0 && openTutorialFlag ? this.openTutorial() : null}

        { i===3 && openContactFlag ? this.openContact() : null}
      </View>

    })
  };

  // 视差头部隐藏或者显示
  changeHeader = (flag) => {
    this.setState({
      headerTitleFlag: flag,
    })
  };

  // 视差图隐藏是显示的标题
  fixedHeader = () => {
    let {headerTitleFlag} = this.state;
    let {aboutAuthorData} = this.state;
    if (aboutAuthorData.author) {
      return <View style={styles.fixedHeaderBox}>
        {/* 左边返回按钮 */}
        <TouchableOpacity onPress={this.goBack}>
          <Ionicons name={'ios-arrow-back'} size={26} color={'#fff'}/>
        </TouchableOpacity>

        {/* 中间的title*/}
        {
          !headerTitleFlag ? <Text style={styles.fixedHeader}>{aboutAuthorData.author.name}</Text> : null
        }

        {/* 右边分享按钮 */}
        <TouchableOpacity>
          <MaterialIcons name={'share'} size={26} color={'white'}/>
        </TouchableOpacity>
      </View>
    }
  };

  // 滚动视图头部背景
  headBackground = () => {
    let {aboutAuthorData} = this.state;
    if (aboutAuthorData.author) {
      return <Image source={{uri: aboutAuthorData.author.backgroundImg}} style={styles.headBgc}/>
    }
  };

  // 滚动视图header
  renderForeground = () => {
    let {aboutAuthorData} = this.state;
    if (aboutAuthorData.author) {
      return <View style={styles.foreground}>
        <Image source={{uri: aboutAuthorData.author.avatar}} style={styles.foregroundImg}/>
        <Text style={styles.foregroundTitle}>{aboutAuthorData.author.name}</Text>
        <Text style={styles.foregroundTxt}>{aboutAuthorData.author.description}</Text>
      </View>
    }
    return null
  };

  // header左侧返回按钮
  goBack = () => {
    let {navigation} = this.props;
    navigation.goBack()
  };

}

const screenW = Dimensions.get('window').width;
const styles = StyleSheet.create({
  foreground: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  headBgc: {
    width: screenW,
    height: '100%',
  },
  fixedHeaderBox: {
    flex:1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingLeft: 10,
    paddingRight: 10,
  },
  fixedHeader: {
    fontSize: 26,
    color: '#fff'
  },
  foregroundImg: {
    width: 100,
    height: 100,
    borderRadius: 50
  },
  foregroundTitle: {
    color: '#fff',
    fontSize: 26,
  },
  foregroundTxt: {
    color: '#fff',
    paddingLeft: 20,
    paddingRight: 20,
  },
  contentItem: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderColor: '#f3f3f3',
    height: 60,
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingLeft: 10,
    paddingRight: 10,
  },
  iconNameBox: {
    flexDirection: 'row',
  },
  contentName: {
    marginLeft: 10
  },
  tutorialItem:{
    flexDirection: 'row',
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderColor: '#f3f3f3',
    height: 60,
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingLeft: 40,
    paddingRight: 30,
  }
});

export default AboutAuthorPage;